<template>
  <div class="parameter_page">
    <div class="parameter_header"><span>业务参数</span></div>
    <div class="parameter_box">
      <u-page-header
        title="公海规则设置"
        style="font-size: 16px"
      ></u-page-header>
      <div class="parameter_box_tit1">
        超过N天"未跟进"的客户，由系统定时划入公海
      </div>
      <div class="parameter_box_tit2">
        说明：从开启公海或获得客户（新增、转移、从公海抢到客户）开始，对客户和客户的商机、订单写跟进以及新增商机、订单都视为跟进了客户。
      </div>
      <div class="parameter_box_radio">
        <el-radio-group v-model="radio1" class="ml-4">
          <el-radio label="1" size="large">不启用</el-radio>
          <el-radio label="2" size="large">启用</el-radio>
        </el-radio-group>
      </div>
      <div style="padding-left: 16px">
        <el-checkbox v-model="checked1">所有客户统一设置</el-checkbox>
      </div>
      <div style="padding-left: 16px; margin-top: 16px">
        <parameter-table
          :tableField="customerTypeField"
          :tableData="customerUnityDate"
        ></parameter-table>
      </div>
      <div style="padding-left: 16px; margin-top: 16px">
        <el-checkbox v-model="checked2">根据客户类型设置</el-checkbox>
      </div>
      <div style="padding-left: 16px; margin-top: 16px">
        <parameter-table
          :tableField="customerTypeField"
          :tableData="customerTypeDate"
        ></parameter-table>
      </div>
      <div class="parameter_box_tit1" style="margin-top: 16px">
        公海中超过N天“未跟进”的客户，由系统定时转为垃圾客户
      </div>
      <div class="parameter_box_tit2">
        说明：从划入公海时间开始来计算客户多久未达到“跟进”状态。
      </div>
      <div class="parameter_box_radio">
        <el-radio-group v-model="radio1" class="ml-4">
          <el-radio label="1" size="large">不启用</el-radio>
          <el-radio label="2" size="large">启用</el-radio>
        </el-radio-group>
      </div>
      <div style="padding-left: 16px; margin-top: 16px">
        <parameter-table
          :tableField="customerSeasField"
          :tableData="customerSeaDate"
        ></parameter-table>
      </div>
      <div class="parameter_box_tit1" style="margin-top: 16px">
        客户领取限制
      </div>
      <div class="parameter_box_tit2">
        说明： 客户被转移或者系统定时划入公海后，前负责人在N天内不能领取。
      </div>
      <div class="parameter_box_radio">
        <el-radio-group v-model="radio1" class="ml-4">
          <el-radio label="1" size="large">不启用</el-radio>
          <el-radio label="2" size="large">启用</el-radio>
        </el-radio-group>
      </div>
      <u-page-header
        title="客户数量限制"
        style="font-size: 16px"
      ></u-page-header>
      <div class="parameter_box_tit1">限制每个员工拥有的最大客户数</div>
      <div class="parameter_box_tit2">
        当员工拥有客户数超过规定上限时，新增客户无法成功。
      </div>
      <div class="parameter_box_tit2">
        如果在设置最大客户数前，员工所拥有客户数已超过上限，则原有客户不会影响，但是该员工无法再继续添加新客户。
      </div>
      <div class="parameter_box_radio">
        <el-radio-group v-model="radio1" class="ml-4">
          <el-radio label="1" size="large">不启用</el-radio>
          <el-radio label="2" size="large">启用</el-radio>
        </el-radio-group>
      </div>
      <div style="padding-left: 16px">
        <el-checkbox v-model="checked2">按员工设置不同的客户数上限</el-checkbox>
      </div>
      <u-page-header
        title="客户保护设置"
        style="font-size: 16px; margin-top: 16px"
      ></u-page-header>
      <div class="parameter_box_tit1">客户保护期时长设置</div>
      <div class="parameter_box_tit2">
        说明：
        保护期内客户不可进行移入公海、转移、删除等操作，保护期开始时间从客户获取时间开始计算。
      </div>
      <div class="parameter_box_radio">
        <el-radio-group v-model="radio1" class="ml-4">
          <el-radio label="1" size="large">不启用</el-radio>
          <el-radio label="2" size="large">启用</el-radio>
        </el-radio-group>
      </div>
    </div>
  </div>
</template>

<script setup name="more">
import uPageHeader from '../ui/u-page-header.vue'
import parameterTable from './table.vue'
import { ref, getCurrentInstance, toRefs, reactive } from 'vue'
const { proxy } = getCurrentInstance()
const data = reactive({
  radio1: '',
  checked2: '',
  checked1: '',
  customerUnityDate: [
    {
      title: '所有客户',
      days: 30,
      times: null,
      reminderTime: null
    }
  ],
  customerTypeDate: [
    {
      title: '一般产品客户',
      days: 60,
      times: null,
      reminderTime: null
    },
    {
      title: '重点客户',
      days: 90,
      times: null,
      reminderTime: null
    }
  ],
  customerSeaDate: [
    {
      title: '所有客户',
      days: 30,
      times: null
    }
  ],
  // 客户类型
  customerTypeField: [
    { label: '客户类型', value: 'title', type: 'text', width: '160px' },
    { label: '未跟进天数', value: 'days', type: 'input', width: '210px' },
    { label: '划入公海时间', value: 'dateTime', type: 'date' },
    { label: '销售人员提醒时间', value: 'reminderTime', type: 'input' }
  ],
  //公海客户
  customerSeasField: [
    { label: '客户类型', value: 'title', type: 'text', width: '160px' },
    { label: '未跟进天数', value: 'days', type: 'input', width: '210px' },
    { label: '划入垃圾池客户时间', value: 'dateTime', type: 'date' }
  ]
})
const {
  customerTypeField,
  customerSeasField,
  customerUnityDate,
  customerTypeDate,
  customerSeaDate,
  radio1,
  checked2,
  checked1
} = toRefs(data)
</script>
<style lang="scss" scoped>
.parameter_page {
  padding: 80px 20px 20px 20px;

  .parameter_header {
    height: 60px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #f2f2f2;
    color: #333;
    font-weight: 600;
    line-height: 60px;
    font-size: 15px;
    span {
      padding-left: 24px;
    }
  }
  .parameter_box {
    display: block;
    padding: 24px;
    border: 1px solid #eee;
    .parameter_box_tit1 {
      font-size: 14px;
      color: #666;
      padding-top: 16px;
      display: block;
      padding-left: 16px;
    }
    .parameter_box_tit2 {
      font-size: 14px;
      color: #888;
      padding-top: 16px;
      display: block;
      padding-left: 16px;
    }
    .parameter_box_radio {
      width: 100%;
      display: block;
      padding: 10px 0;
    }
  }
}
</style>
